<template>
  <div class="lesson-video">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="课程视频"
      left-text="返回"
      @click-left="$router.back()"
    />
    <!-- 视频区域 -->
    <div id="video-container"></div>
  </div>
</template>

<script>
import { NavBar } from 'vant'
import { videoPlayInfo } from '@/service/course'
export default {
  name: 'LessonVideo',
  components: {
    VanNavBar: NavBar
  },
  props: {
    lessonId: {
      type: [Number, String],
      require: true
    }
  },
  created () {
    this.loadLessonVideo()
  },
  methods: {
    // 加载课程
    async loadLessonVideo () {
      const { data } = await videoPlayInfo({
        lessonId: this.lessonId
      })
      this.initVideo(data.content)
    },
    // 初始化阿里云播放器
    initVideo (content) {
      /* eslint-disable */
      const player = new window.Aliplayer(
        {
          id: 'video-container',
          vid: content.fileId,
          playauth: content.playAuth,
          qualitySort: 'asc',
          format: 'mp4',
          mediaType: 'video',
          width: '100%',
          height: '100%',
          autoplay: true,
          isLive: false,
          rePlay: false,
          playsinline: true,
          preload: true,
          controlBarVisibility: 'hover',
          useH5Prism: true
        },
        function () {
          console.log('The player is created')
        }
      )
      console.log(player)
    }
  }
}
</script>

<style lang="scss" scoped>
#video-container {
  height: 210px !important;
}
</style>
